<template>
  <div class="company-container">
    <el-card>
      <!-- 搜索栏 -->
      <el-form
        ref="companysSearch"
        :model="companysSearch"
        label-position="left"
        label-width="100px"
      >
        <el-row>
          <el-col :span="6">
            <el-form-item label="标签名称">
              <el-input v-model.trim="companysSearch.tags" prop="tags" placeholder="查个标签"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="省" prop="province">
              <el-select
                v-model="companysSearch.province"
                placeholder="查个省"
                @change="companysSearch.city=''"
                style="width:100%"
              >
                <el-option
                  v-for="(item, i) in cityData"
                  :key="i"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="市" prop="city">
              <el-select v-model="companysSearch.city" placeholder="查个市" style="width:100%">
                <el-option
                  v-for="(item1, i1) in cityData[getId].children"
                  :key="i1"
                  :label="item1.label"
                  :value="item1.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称" prop="shortName">
              <el-input v-model.trim="companysSearch.shortName" placeholder="查个简称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="状态" prop="state">
              <el-select v-model="companysSearch.state" style="width:100%">
                <el-option
                  v-for="(item,index) in statusList"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="操作">
              <el-button type="reset" @click="resetForm">清除</el-button>
              <el-button type="primary" @click="getCompanysList">搜索</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <!-- 新增/编辑企业 -->
            <companys-add class="company-add" :dialogStatus="true" @get-companys="getCompanysList"></companys-add>
          </el-col>
        </el-row>
      </el-form>
      <!-- 总数据条数提示 -->
      <el-alert :title="`总共有${total}条数据`" type="info" show-icon></el-alert>
      <!-- 企业列表 -->
      <el-table :data="companysTableData" border>
        <el-table-column prop="id" label="序号" width="50"></el-table-column>
        <el-table-column prop="number" label="企业编号" width="210"></el-table-column>
        <el-table-column prop="shortName" label="企业简称"></el-table-column>
        <el-table-column prop="tags" label="标签" width="60"></el-table-column>
        <el-table-column prop="username" label="创建者" width="100"></el-table-column>
        <el-table-column label="创建时间" width="200">
          <template v-slot="scope">
            <span>{{scope.row.addDate|formdate}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="remarks" label="备注" width="150"></el-table-column>
        <el-table-column prop="state" label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.state==1">启用</span>
            <span v-else>禁用</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="220">
          <template v-slot="scope">
            <!-- <el-button type="primary" size="mini" @click="editCompanyShow(scope.row)">编辑</el-button> -->
            <companys-add :row="scope.row" :dialogStatus="false"></companys-add>
            <el-button
              size="mini"
              type="primary"
              @click="editStatus(scope.row)"
            >{{scope.row.state?'禁用':'启用'}}</el-button>
            <el-button size="mini" type="danger" @click="removeCompany(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <page-tool
        @pageSizeChange="handleSizeChange"
        @pageChange="handleCurrentChange"
        :paginationPage="companysSearch.page"
        :paginationPagesize="companysSearch.pagesize"
        :total="total"
      ></page-tool>
    </el-card>
  </div>
</template>

<script>
import CompanysAdd from '../components/companys-add'
import PageTool from '@/module-dashboard/components/pageTool.vue'
import cityData from '@/api/hmmm/citydata'
import { parseTime } from '@/utils/index.js'
import { listCompanys, remove, disabled } from '@/api/hmmm/companys'
import { provinces, citys } from '@/api/hmmm/citys'

export default {
  components: {
    CompanysAdd,
    PageTool,
  },
  data() {
    return {
      cityData,
      companysSearch: {
        page: 1,
        pagesize: 5,
        tags: '', // 标签名称
        province: '', // 企业所在省份
        city: '', // 企业所在城市
        shortName: '', // 企业简称
        state: null, // 状态
      }, // 搜索公司信息表单
      companysTableData: [], // 公司列表
      total: 0, // 列表条数
      statusList: [
        {
          value: null,
          label: '全部',
        },
        {
          value: 1,
          label: '启用',
        },
        {
          value: 0,
          label: '禁用',
        },
      ],
      dialogStatus: null, // 控制新增
      addStatus: null, // 判断新增/编辑弹出框
    }
  },
  created() {
    this.getCompanysList()
  },
  methods: {
    // *获取企业列表数据
    async getCompanysList() {
      const { data } = await listCompanys(this.companysSearch)
      // console.log(data);
      this.companysTableData = data.items
      this.total = data.counts
      // console.log("获取企业列表成功");
    },
    // *置空表单
    resetForm() {
      this.companysSearch = {}
      this.getCompanysList()
    },
    // *删除企业数据
    async removeCompany(row) {
      const confirmResult = await this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).catch((err) => err)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已经取消删除')
      }
      const { data } = await remove(row.id)
      this.$message({
        type: 'success',
        message: '删除成功!',
      })
      // *判断页面是否最后一页
      if (this.companysTableData.length === 1 && this.companysSearch.page > 1) {
        this.companysSearch.page--
      }
      this.getCompanysList()
    },
    // *监听 pageSize 改变的事件
    handleSizeChange(newSize) {
      // console.log(newSize)
      this.companysSearch.pagesize = newSize
      this.getCompanysList()
    },
    // *监听页码值改变的事件
    handleCurrentChange(newPage) {
      console.log(newPage)
      this.companysSearch.page = newPage
      this.getCompanysList()
    },
    // *修改状态
    async editStatus(row) {
      let status = ''
      let state = null
      if (row.state === 1) {
        this.state = 0
        status = '禁用'
      } else {
        state = 1
        status = '启用'
      }
      const confirmResult = await this.$confirm('确定要修改此数据状态么, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).catch((err) => err)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已经取消修改')
      }
      const data = await disabled({
        id: row.id,
        state: state,
      })
      this.getCompanysList()
      this.$message({
        type: 'success',
        message: '修改状态成功!',
      })
    },
  },
  computed: {
    getId() {
      let ii = this.cityData.findIndex((item, i) => {
        return item.value === this.companysSearch.province
      })
      if (ii === -1) {
        ii = 0
      }
      return ii
    },
  },
  filters: {
    formdate(time) {
      return parseTime(time)
    },
  },
}
</script>

<style scoped lang='less'>
.company-container {
  padding: 20px;
}
.el-table {
  margin-top: 8px;
  margin-bottom: 8px;
}
.el-col-4 {
  margin-right: 4px;
}
</style>
